/*
 * @Author: shiguo
 * @Date: 2022-04-24 14:27:02
 * @LastEditors: shiguo
 * @LastEditTime: 2023-06-16 16:24:43
 * @FilePath: /wx_yh_server/node_modules/@aks-dev/taro-h5/lib/PopoverView/index.tsx
 */
import { View } from '@tarojs/components';
import React, { useImperativeHandle, useState } from 'react';
import type { PopoverViewOptions } from '../../types/PopoverView';





export const PopoverView = React.forwardRef<PopoverViewOptions.RefAttributes, {}>((_, ref) => {
    const [visible, setVisible] = useState<boolean>(false);
    const [options, setOptions] = useState<Partial<PopoverViewOptions> | undefined>()



    useImperativeHandle<unknown, PopoverViewOptions.RefAttributes>(ref, () => ({
        showPopoverView: (options: Partial<PopoverViewOptions>) => {
            setVisible(true);
            setOptions(options)

        },
        hidePopoverView: () => {
            setVisible(false);
            setOptions(undefined)
        }
    }), [visible])

    if (!visible)
        return null;

    return (
        <View  style={{...styles.container, ...options?.style}} onClick={e => {
            setVisible(false);
            setOptions(undefined)
            // e.stopPropagation()
        }}>
            {React.isValidElement(options?.content) && options?.content}
        </View>
    )
})

export const popoverViewRef = React.createRef<PopoverViewOptions.RefAttributes>();
export const showPopoverView = (options: Partial<PopoverViewOptions>) => popoverViewRef.current?.showPopoverView(options)
export const hidePopoverView = () => popoverViewRef.current?.hidePopoverView()


const styles : Record<string, React.CSSProperties> = {
    container: {
        position: 'fixed',
        zIndex: 99999,
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        display: 'flex',
        
        // backgroundColor:'red'
    },
}
